<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-06-11 15:56:17
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:23:15
-->
<template>
  <div>
    <el-dialog
      title="新增员工"
      :visible.sync="dialog.dialogStaffShow"
      width="60%"
      @close="resetForm"
      custom-class="dialogClass"
      v-loading="loading"
      :close-on-click-modal="false"
    >
      <el-form
        v-if="dialog.dialogStaffShow"
        :model="staffFrom"
        ref="staffFrom"
        :rules="staffRules"
        label-position="top"
      >
        <el-form-item label="姓名" prop="nickName">
          <el-input
            v-model="staffFrom.nickName"
            placeholder="请输入员工真实姓名"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input
            v-model="staffFrom.phonenumber"
            placeholder="请输入员工手机号（登录账号）"
            style="width: 330px"
            :disabled="this.staffFrom.userId ? true : false"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="初始密码"
          prop="password"
          v-if="this.staffFrom.userId == ''"
        >
          <el-input
            v-model="staffFrom.password"
            placeholder="请输入初始密码"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="confirmPassword"
          v-if="this.staffFrom.userId == ''"
        >
          <el-input
            v-model="staffFrom.confirmPassword"
            placeholder="请确认初始密码"
            style="width: 330px"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="邮箱">
          <el-input
            v-model="staffFrom.email"
            placeholder="请输入邮箱"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            v-model="staffFrom.sex"
            placeholder="请选择性别"
            style="width: 330px"
          >
            <el-option
              v-for="item in gander"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="部门"
          prop="deptId"
          v-if="this.staffFrom.isAdmin !== 1"
        >
          <el-select
            v-model="staffFrom.deptId"
            placeholder="请选择公司部门"
            style="width: 330px"
          >
            <el-option
              v-for="item in detData"
              :key="item.id"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="角色"
          prop="roleIds"
          v-if="this.staffFrom.isAdmin !== 1"
        >
          <el-select
            v-model="staffFrom.roleIds"
            placeholder="请选择角色"
            style="width: 330px"
            multiple
          >
            <el-option
              v-for="item in roleData"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直属上级" v-if="this.staffFrom.isAdmin !== 1">
          <el-select
            v-model="staffFrom.parentId"
            placeholder="请选择直属上级"
            style="width: 330px"
          >
            <el-option
              v-for="item in upData"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务">
          <el-input
            v-model="staffFrom.post"
            placeholder="请输入员工职务"
            style="width: 330px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialog.dialogStaffShow = false">取消</el-button>
        <el-button
          type="primary"
          @click="onSubmit"
          v-if="this.staffFrom.userId == ''"
        >
          保存
        </el-button>
        <el-button type="primary" @click="putSubmit" v-else>保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  addUser,
  getDeptList,
  getRoleList,
  getChargeList,
  putUser,
} from "@/api/sys";
// 验证手机号的校验规则
let checkMobile = (rule, value, callback) => {
  // 验证手机号的正则表达式
  const regMobile = /^1(3|4|5|6|7|8|9)\d{9}$/;

  if (regMobile.test(value)) {
    // 合法的手机号
    return callback();
  }
  // 不合法
  callback(new Error("请输入正确的手机号"));
};
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    staffFrom: {
      type: Object,
      required: true,
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.staffFrom.confirmPassword !== "") {
          this.$refs.staffFrom.validateField("confirmPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.staffFrom.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      detData: [], //组织列表
      roleData: [], //角色列表
      upData: [], //直属上级
      staffRules: {
        nickName: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度在 2 到 3 个字符", trigger: "blur" },
        ],
        phonenumber: [
          {
            validator: checkMobile,
            required: true,
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", tigger: "blur" },
          { min: 6, max: 12, message: "密码长度在6-12位", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        confirmPassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          { min: 6, max: 12, message: "密码长度在6-12位", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
        deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
        roleIds: [{ required: true, message: "请选择角色", trigger: "change" }],
        post: [{ required: true, message: "请输入员工职务", trigger: "blur" }],
      },
      gander: [
        {
          label: "男",
          value: 0,
        },
        {
          label: "女",
          value: 1,
        },
      ],
      department: [],
    };
  },
  created() {
    this.getTreeData();
    this.getOrList();
    this.getRoleList();
  },
  mounted() {
    this.$nextTick(function () {
      this.getChargeList();
    });
  },
  computed: {
    ...mapGetters(["loading"]),
  },
  methods: {
    putSubmit() {
      this.$refs.staffFrom.validate((valid) => {
        if (!valid) return this.$message.info("请输入必填项");
        this.$store.dispatch("modifyLoading", true);
        putUser(this.staffFrom).then((res) => {
          if (res) {
            this.$message.success(res.msg);
            this.dialog.dialogStaffShow = false;
            this.$store.dispatch("modifyLoading", false);
            this.$store.dispatch("GetInfo")
            this.$parent.getTree();
          }
        });
      });
    },
    // 获取直属上级
    getChargeList() {
      getChargeList({
        userId: this.staffFrom.userId,
      }).then((res) => {
        this.upData = res.data;
      });
    },
    // 获取角色列表
    getRoleList() {
      getRoleList().then((res) => {
        this.roleData = res.rows;
      });
    },
    // 获取组织列表
    getOrList() {
      getDeptList().then((res) => {
        this.detData = res.data;
      });
    },
    // 请求公司部门
    getTreeData() {},
    onSubmit() {
      this.$refs.staffFrom.validate((valid) => {
        if (!valid) return this.$message.info("请输入必填项");
        this.$store.dispatch("modifyLoading", true);
        addUser(this.staffFrom).then((res) => {
          if (res) {
            this.$message.success(res.msg);
            this.dialog.dialogStaffShow = false;
            this.$store.dispatch("modifyLoading", false);
            this.$parent.getTree();
          }
        });
      });
    },
    resetForm() {
      this.dialog.ejectStaff = false;
      this.staffFrom.isAdmin = "";
      this.staffFrom.userId = "";
      this.staffFrom.nickName = "";
      this.staffFrom.phonenumber = "";
      this.staffFrom.password = "";
      this.staffFrom.confirmPassword = "";
      this.staffFrom.email = "";
      this.staffFrom.sex = "";
      this.staffFrom.deptId = "";
      this.staffFrom.roleIds = [];
      this.staffFrom.parentId = "";
      this.staffFrom.post = "";
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  display: flex;
  flex-wrap: wrap;
  margin-left: 72px;
  /deep/.el-form-item {
    width: 50%;
  }
}
</style>